<script setup>
import { ref, reactive, toRefs } from "vue";

const state = reactive({
  headParams: {
    number: "",
    iphone: "",
    idCard: "",
    name: "",
    iphone: "",
    symptom: "",
    address: "",
    sign:"",
    unpaidFee:"",
    paid:""
  },
  tableList: [
    {
      time: "05-21 11:56",
      content: "坦度螺酮胶囊 基10mg*24粒",
      nationNumber: "X805BET010E0",
      nationName: "枸橼酸坦度螺",
      provinceNumber: "",
      measure: "10",
      unit: "mg",
      frequency: "Tid",
      usage: "口服",
      days: "42.0",
      droplet: "1.895",
      entrust: "1",
      price: "120",
      dosage: "粒",
      total: "227.4",
      dosageUnit: "",
      amount: "",
      sort: "",
    },
    {
      time: "05-21 11:56",
      content: "草酸艾司西献著兰片 带里/基",
      nationNumber: "XHD6ABA225A0.",
      nationName: "草酸艾司西酞",
      provinceNumber: "",
      measure: "10",
      unit: "mg",
      frequency: "q.n",
      usage: "口服",
      days: "42.0",
      droplet: "3.0493",
      entrust: "1",
      price: "42",
      dosage: "片",
      total: "128.07",
      dosageUnit: "",
      amount: "",
      sort: "",
    },
    {
      time: "05-21 11:56",
      content: "富马酸峰硫平片 基25mg*28片.",
      nationNumber: "XR05AID94AD",
      nationName: "富马酸喹碛平片",
      provinceNumber: "",
      measure: "25",
      unit: "mg",
      frequency: "q.n",
      usage: "口服",
      days: "56.0",
      droplet: "0.3929",
      entrust: "1",
      price: "56",
      dosage: "片",
      total: "22",
      dosageUnit: "",
      amount: "",
      sort: "",
    },
  ],
  footerParams: {
    operator: "",
    dept: '',
    time: "",
  },
  topList: ["断开(F3)", "保存(F2)", "刷新(F4)", "历史信息", "转诊", "助手(F1)", "刷新项目(F5)", "结束问诊(F12)", "关联费用", "清屏", "传染病上报", "急诊电子病历", "电子病历 ", "健康档案", "儿保系统", "病人信息", "预约挂号", "导出处方", "病生理", "住院证", "共享医嘱", "病人导诊", "住院电子病历", "危急值", "死亡上报", "设置网格", "营养系统", "说明医嘱", "SPD扫码"]
});

const { headParams, tableList, footerParams, topList } = toRefs(state);
</script>

<template>
  <div class="prescription-main">
    <div class="prescription-head-top">
      <div class="item" v-for="item in topList" :key="item">{{ item }}</div>
    </div>
    <div class="prescription-head">
      <div class="prescription-item">
        <span>问诊号</span>
        <span><input type="text" v-model="headParams.number" /></span>
      </div>
      <div class="prescription-item">
        <span>身份证</span>
        <span><input type="text" v-model="headParams.idCard" /></span>
      </div>
      <div class="prescription-item">
        <span>姓名</span>
        <span><input type="text" v-model="headParams.name" /></span>
      </div>
      <div class="prescription-item">
        <span>年龄</span>
        <span><input type="text" v-model="headParams.age" /></span>
      </div>
      <div class="prescription-item">
        <span>联系方式</span>
        <span><input type="text" v-model="headParams.iphone" /></span>
      </div>
      <div class="prescription-item">
        <span>症状</span>
        <span><input type="text" v-model="headParams.symptom" /></span>
      </div>
      <div class="prescription-item">
        <span>体征</span>
        <span><input type="text" v-model="headParams.sign" /></span>
      </div>
      <div class="prescription-item">
        <span>未交费</span>
        <span><input type="text" v-model="headParams.unpaidFee" /></span>
      </div>
      <div class="prescription-item">
        <span>已缴费</span>
        <span><input type="text" v-model="headParams.paid" /></span>
      </div>
      <div class="prescription-item">
        <span>地址</span>
        <span><input type="text" v-model="headParams.address" /></span>
      </div>
    </div>
    <div class="prescription-main-box">
      <table border="1" cellspacing="0">
        <tr>
          <th>开嘱时间</th>
          <th>医嘱内容</th>
          <th>国家医编码</th>
          <th>国家医保名称</th>
          <th>省医保编码</th>
          <th>剂量</th>
          <th>单位</th>
          <th>频次</th>
          <th>用法</th>
          <th>天数</th>
          <th>滴量</th>
          <th>嘱托</th>
          <th>单价</th>
          <th>剂数</th>
          <th>总量</th>
          <th>单位</th>
          <th>金额</th>
          <th>医保分类</th>
        </tr>
        <tr v-for="(item, index) in tableList" :key="index">
          <td><input type="text" v-model="item.time" /></td>
          <td><input type="text" v-model="item.content" /></td>
          <td><input type="text" v-model="item.nationNumber" /></td>
          <td><input type="text" v-model="item.nationName" /></td>
          <td><input type="text" v-model="item.provinceNumber" /></td>
          <td><input type="text" v-model="item.measure" /></td>
          <td><input type="text" v-model="item.unit" /></td>
          <td><input type="text" v-model="item.frequency" /></td>
          <td><input type="text" v-model="item.usage" /></td>
          <td><input type="text" v-model="item.days" /></td>
          <td><input type="text" v-model="item.droplet" /></td>
          <td><input type="text" v-model="item.entrust" /></td>
          <td><input type="text" v-model="item.price" /></td>
          <td><input type="text" v-model="item.dosage" /></td>
          <td><input type="text" v-model="item.total" /></td>
          <td><input type="text" v-model="item.dosageUnit" /></td>
          <td><input type="text" v-model="item.amount" /></td>
          <td><input type="text" v-model="item.sort" /></td>
        </tr>
      </table>
    </div>
    <div class="prescription-footer">
      <div class="prescription-footer-item">
        <span>操作员：</span>
        <span><input type="text" v-model="footerParams.operator" /></span>
      </div>
      <div class="prescription-footer-item">
        <span>部门科室：</span>
        <span><input type="text" v-model="footerParams.dept" /></span>
      </div>
      <div class="prescription-footer-item">
        <span>当前时间：</span>
        <span><input type="text" v-model="footerParams.time" /></span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}

.prescription-head {
  display: flex;
  flex-flow: wrap;
  border: 1px solid #e2e2e2;
}

.prescription-head .prescription-item:nth-child(5n) {
  border-right: none;
}

.prescription-item {
  width: 20%;
  border: 1px solid #e2e2e2;
  border-left: none;
  border-top: none;
  padding: 5px;
  box-sizing: border-box;
  flex: none;
  display: flex;
  align-items: center;
}

span {
  display: block;
}

.prescription-item span:nth-child(1) {
  width: 60px;
  font-size: 14px;
  text-align: right;
  margin-right: 10px;
  flex: none;
}

.prescription-item span:nth-child(2) {
  width: 100%;
}

table {
  margin-top: 15px;
  width: 100%;
  max-width: 100%;
  border: 1px solid #ccc;
  border-right: none;
}

table tr th {
  border: none;
  border-right: 1px solid #e2e2e2;
  padding: 10px;
  font-size: 12px;
  font-weight: normal;
}

table tr td {
  border: none;
  border-right: 1px solid #e2e2e2;
  border-top: 1px solid #e2e2e2;
  font-size: 14px;
  width: 5%;
  padding: 5px;
}

input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: rgba(107, 128, 228, 0.1);
  padding: 5px 10px;
}

input {
  outline: none;
  /* 去掉默认的蓝色边框 */
  border: none;
  /* 完全去掉边框 */
  box-shadow: none;
  /* 如果有阴影效果，也可以去掉 */
}

.prescription-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  background: #f2f2f2;
  height: 32px;
  line-height: 32px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.prescription-footer-item {
  font-size: 12px;
  display: flex;
}

.prescription-head-top {
  display: flex;
  flex-flow: wrap;
  padding: 20px;
  border: 1px solid #e2e2e2;
  margin-bottom: 20px;
}

.item {
  border-right: 1px solid #ccc;
  padding-right: 10px;
  margin-right: 10px;
}
</style>
